<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入layui的css样式文件-->
    <link rel="stylesheet"
          type="text/css"
          href="/layui/css/layui.css"/>
</head>
<body>
<!--根据测试者名称进行搜索-->
    <form class="layui-form" id="searchFrm" lay-filter="searchFrm">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" name="searchTesterName" id="searchTesterName" placeholder="请输入测试者名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 100px;">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="btnTesterSearch">搜索</button>
            </div>
        </div>
    </form>
<!--    弹出测试者性格测试图表-->
<!--    <form lay-filter="deptFrm" id="deptFrm" style="display: none;padding:10px">-->
        <div lay-filter="deptFrm" class="layui-container" id="deptFrm" style="display: none;padding:10px;">
            <div class="layui-row">
                <div class="layui-col-md10 layui-col-md-offset1">
                    <blockquote class="layui-elem-quote">性格色彩</blockquote>
                    <div id="pieDemo" style="width: 600px;height: 600px;margin: 0 auto"  ></div>
                </div>
            </div>
        </div>
<!--    </form>-->
    <!--定义表格标签-->
    <table class="layui-table" id="test" lay-filter="test"></table>

    <!--定义每一行的工具条-->
    <script type="text/html" id="toolbarRow">
        <a class="layui-btn layui-btn-xs" lay-event="look">查看详情</a>
    </script>
    <script type="text/javascript" src="/echarts.min.js"></script>
    <!--引入layui js文件-->
    <script type="text/javascript" src="/layui/layui.all.js"></script>
    <script>
        layui.use(["layer","laydate","table","form"],function(){
            //获取table组件对象
            var table = layui.table;
            //获取表单组件对象
            var form=layui.form;
            //获取jq对象
            var $=layui.$;

            form.on("submit(btnTesterSearch)",function (obj){
                console.log("正在根据测试者姓名查询")
                //触发表格重新根据查询条件请求数据
                table.reload("test",{
                    where:{
                        searchTesterName:$("#searchTesterName").val() //查询条件
                    },
                    page:{
                        curr:1 //从第1页，显示结果
                    }
                })
            })

            //监听行工具事件
            table.on('tool(test)', function(obj){
                //obj:保存了当前行的数据对象
                console.log("查看测试者图表信息")
                console.log(obj)
                var data = obj.data;
                console.log(data)
                var testerId=data.id;
                // var testerId=11;
                console.log('id:'+testerId)
                //点击行工具条中的查看详情按钮
                if(obj.event === 'look'){ //做修改操作
                    console.log("look")
                    layer.open({
                        type:1, //弹出页面层
                        content:$("#deptFrm"),
                        area: ['1100px', '600px']
                    })
                    //将要修改的数据行的值，设置到表单中
                    form.val("deptFrm",obj.data);

                    $.ajax({
                        url:"/tester/testerData",
                        type:"post",
                        data:{"testerId":testerId},
                        success:function (res){
                            console.log(res);
                            var data = res.data;
                            //初始化饼状图
                            var chartDom = document.getElementById('pieDemo');
                            var myChart = echarts.init(chartDom);
                            var option;
                            option = {
                                title: {
                                    text: 'FPA性格测试报告'+'【'+data.name+'】',
                                    subtext: '【测试人】'+data.name+'【手机号】'+data.phone+'【测试时间】'+data.createTime,
                                    left: 'center'
                                },
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left'
                                },
                                series: [
                                    {
                                        name: '性格颜色',
                                        type: 'pie',
                                        radius: '50%',
                                        data: [
                                            { value: data.blue==null?0:data.blue, name: '蓝色性格',itemStyle:{color:'#3695ff'} },
                                            { value: data.green==null?0:data.green, name: '绿色性格',itemStyle:{color:'#36ff25'} },
                                            { value: data.yellow==null?0:data.yellow, name: '黄色性格',itemStyle:{color:'#faff11'} },
                                            { value: data.red==null?0:data.red, name: '红色性格',itemStyle:{color:'#ff392a'} },
                                        ],
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };

                            myChart.setOption(option);
                        }
                    })
                }
            });

            //使用table组件渲染表格标签
            table.render({
                elem:"#test" //定义要渲染的目标表格标签
                ,url:"/tester/listTesterVo"  //定义要获取的服务器数据地址
                ,page:true //开启分页
                ,limit:3 //设置每页显示几条数据
                ,limits:[3,5,10] //配置每页可选的显示条数
                ,cols:[
                    [
                        {field:'id', width:120, title: '编号'}
                        ,{field:'name', width:100, title: '测试者'}
                        ,{field:'status', width:80, title: '状态', templet:function (d){
                            //templet:定义列模板函数，在模板函数中处理数据
                            //参数d:存储了当前行的对象数据
                            //console.log(d);
                            if(d.status=='1'){
                                return "<span style='color:green;'>已完成</span>";
                            }else{
                                return "<span style='color:red;'>未完成</span>"
                            }
                        }}
                        ,{field:'createTime', title: '创建时间', width:180}
                        ,{field:'red', title: '红色', width:100,style:"color:#FF5722"}
                        ,{field:'blue', title: '蓝色', width:100,style:"color:#01AAED"}
                        ,{field:'yellow', title: '黄色', width:100,style:"color:#FFB800"}
                        ,{field:'green', title: '绿色', width:100,style:"color:#5FB878"}
                        ,{fixed: 'right', title:'操作', toolbar: '#toolbarRow', width:170}
                    ]
                ]
            })
        });


    </script>
</body>
</html>